<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS引入方式</title>
    <link type="text/css" rel="stylesheet" href="test.css">
    <style>
        @import "test.css";
    </style>
    <style>
        /*.c1{*/
        /*color:green;*/
        /*}*/
        div{
            color:green;
        }
    </style>
</head>
<body>
<!--
    行内式:通过为某个HTML元素指定style属性的值设置对应的样式
        其值的格式为属性名:属性值;...
        该方式只能为某一个元素设置样式
-->
<div style="color:red;font-size: 20px;background-color: pink;">行内式</div>
<!--
    内联样式:可以为当前HTML文档中多个元素赋予指定的样式
        需要通过CSS选择器进行使用
        1.在head标签中定义一个style标签
            在该标签中通过选择器定义一些样式
        2.在对应的元素中调用指定的选择器
-->
<div class="c1">内联样式</div>
<div class="c1">内联样式</div>
<div class="c1">内联样式</div>
<p class="c1">段落</p>
<!--
    外部引入:
        1.在当前工程中定义一个以css作为的文件
            在该文件中定义指定的css样式
            内容与内联样式的style标签中的内容一致
        2.在当前文档中引入外部的css文件
            此时有两种引入方式
            a.link引入:
                在当前文档的head标签中定义一个link标签
                在link标签中指定需要引入的文件
                link标签与style标签平级
            b.@import引入
                在head标签中定义一个style标签
                在style标签内使用@import进行引入
                其格式为:@import "css文件所在位置"
-->
<div class="c2">外部引入方式一</div>
<div class="c3">外部引入方式二</div>
<!--
    优先级
        对于三种引入方式:行内式、内联样式、外部引入
        其中行内式的优先级最高
        内联样式与外部引入两者优先级一致
        由于HTML元素加载顺序是从上往下、从左往右
        如果某一个元素同时存在内联样式与外部引入样式
        则此时两个样式均生效
        后面生效的样式会覆盖前面生效的样式
        可以在样式值后面加!important用于破坏优先级
        当某一个样式添加了!important后会无视优先级的概念
        直接将该样式生效
-->
</body>
</html>